<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>post请求</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .container{
            margin: 80px auto;
            border: 2px solid pink;
            width: 400px;
            height: 400px;
        }
        .cell{
            margin: 80px 50px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        label{
            width: 100px;
        }
        input{
            flex: 1;
        }    
    </style>
</head>
<body>
    <form class="container" method="post" action="http://localhost:8888/users/login">
        <p class="cell">
            <label for="username">用户名</label>
            <input type="text" id="username" name="username">
        </p>  
    
        <p class="cell">
            <label for="password">密码</label>
            <input type="text" id="password" name="password">
        </p>
    
        <p class="cell">
            <button id="btn" type="submit">表单提交</button>
            <button id="btn2">原生ajax</button>
            <button id="btn3">使用jquery</button>
        </p>
    </form>

    <script src="../javascripts/jquery.js"></script>
    <script>
        // 原生ajax
        document.querySelector('#btn2').onclick = function(event){
            // 禁止表单默认提交
            event.preventDefault()

            var username = document.querySelector('#username').value
            var password = document.querySelector('#password').value

            var xhr = new XMLHttpRequest()

            xhr.open('post',`http://localhost:8888/users/login`,true)

            // 1.上传json数据，先设置请求头为json，再上传字符串格式的json数据
            // xhr.setRequestHeader('Content-Type','application/json')
            // xhr.send(JSON.stringify({
            //     username,
            //     password
            // }))

            // 2.上传表单数据，先设置请求头为表单，再上传键值对拼接的字符串
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
            xhr.send(`username=${username}&password=${password}`)

            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4 && xhr.status == 200){
                    console.log(xhr.response)
                }
            }
        }

        // 使用jquery
        document.querySelector('#btn3').onclick = function(event){
            var username = document.querySelector('#username').value
            var password = document.querySelector('#password').value

            $.ajax({
                method: 'post',
                url: 'http://localhost:8888/users/login',

                // 1.默认上传表单数据,只需要写一个json对象
                // data: {
                //     username,
                //     password
                // },                

                // 2.如果上传json数据,先改请求头,再将data改成json字符串
                headers: {
                    'Content-Type': 'application/json'
                },
                data: JSON.stringify({
                    username,
                    password                    
                }),

                success(res){
                    console.log(res)
                }
            })

            // 禁止表单默认提交
            return false
        }        
    </script>
</body>
</html>